<template>
  <section class="bw-flow-main-container">
    <section class="bw-flow-main-header">
      <div class="bw-header-title-box">
        <span class="title"> {{ curComName }}</span>

        <div class="bnts-group">
          <dropdown-button @click="onButtonClick" type="primary">
            <span> 设计组件 </span>

            <template #icon>
              <Icon icon="ant-design:down-outlined" />
            </template>

            <template #overlay>
              <Menu @click="onMenuClick">
                <menu-item v-for="item in curToolMeunList" :key="item.id">
                  <Icon :icon="item.icon" style="margin-right: 8px" />
                  <span> {{ item.name }} </span>
                </menu-item>
              </Menu>
            </template>
          </dropdown-button>
        </div>
      </div>

      <Menu mode="horizontal" v-model:selectedKeys="curKey">
        <menu-item key="preview"><span> 组件预览 </span> </menu-item>
      </Menu>
    </section>

    <section class="bw-flow-main-content">
      <RouterView>
        <template #default="{ Component }">
          <keep-alive>
            <component :is="Component" :key="route.fullPath" />
          </keep-alive>
        </template>
      </RouterView>
    </section>
  </section>
</template>

<script lang="ts" setup>
import { useFlowMain } from './util'
import { DropdownButton, Menu, MenuItem } from 'ant-design-vue'

const {
  route,
  curKey,
  curComName,
  curToolMeunList,

  onMenuClick,
  onButtonClick,
} = useFlowMain()
</script>

<style lang="less" scoped>
.bw-flow-main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .bw-flow-main-header {
    width: 100%;
    padding-top: 8px;
    background-color: #fff;

    .bw-header-title-box {
      height: 32px;
      display: flex;
      padding: 0 16px;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }

  .bw-flow-main-content {
    flex: 1;
    padding: 16px;
    overflow: hidden;
    width: calc(100% - 32px);

    :deep(.bw-app-data-manage-container) {
      width: 100%;
      height: 100%;
      margin-top: -16px;
      margin-left: -16px;
    }
  }
}
</style>
